
.progress-hd{
    color: @gray3;
    line-height: 36px;
    position: relative;
    font-size: @fs12;
    padding:0 @px15;
    background: @bg-color;
    >div:first-child{
        position:absolute;
        left: 15px;
        top:0;
    }
    >div:nth-child(2){
        margin:0 70px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
        word-wrap: break-word;
        word-break: break-all;
    }
    
    .screening-btn{
        position:absolute;
        right: 15px;
        width: 40px;
        top:0;
        color: @gray5;
        &:after {
                content: " ";
                display: inline-block;
                height: 6px;
                width: 6px;
                border-width: 1px 1px 0 0;
                border-color: @gray5;
                border-style: solid;
                transform: matrix(.71,.71,-.71,.71,0,0) rotate(90deg);
                position: absolute;
                top: 50%;
                margin-top: -5px;
                right: 3px;
        }

    }
    .screening-btn.vux-cell-arrow-up:after {
        transform: matrix(.71,.71,-.71,.71,0,0) rotate(-90deg);
        margin-top: -2px;
    }
}
.progress-bd{
    >ul >li{
        background:@white;
        margin: 0 @px15  @px15 @px15;
        border-radius: @radius5;
        border:1px solid @gray4;
        padding:0 @px10;
        color: @gray5;
        font-size: @fs12;
        article{
            max-height: 0;
            -webkit-transition: max-height .5s cubic-bezier(0, 1, 0, 1) -.1s;
            transition: max-height .5s cubic-bezier(0, 1, 0, 1) -.1s;
            overflow: hidden;
        }
        .hd p{
            overflow: hidden; 
            text-overflow: ellipsis; 
            white-space: nowrap;
            font-weight: normal;
            padding-right: @px18;
            font-size:@fs12;
            &:last-child{
                padding:@px5 0 @px10;
            }
        }
        h6{
            overflow: hidden; 
            text-overflow: ellipsis; 
            white-space: nowrap;
            font-weight: normal;
            padding:@px5 @px18 @px5 0;
            position: relative;
            font-size:@title;
            &:after {
                content: " ";
                display: inline-block;
                height: 6px;
                width: 6px;
                border-width: 2px 2px 0 0;
                border-color: @c-arrow;
                border-style: solid;
                -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0) rotate(90deg);
                transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0) rotate(90deg);
                position: relative;
                top: -2px;
                position: absolute;
                top: 50%;
                margin-top: -@px4;
                right: 5px;
            }
            
        }
        &.cur{
            h6:after{
                -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0) rotate(-90deg);
                transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0) rotate(-90deg);
                
                margin-top: -6px;
            }
            article {
                max-height: 9999px;
                -webkit-transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
                transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
                -webkit-transition-delay: 0s;
                transition-delay: 0s;                        
              }
        }
        .bd {
            padding: @px10 @px5;
            p {
                color: @gray3;
                font-size: @fs12;
            }
            .recent {
                color:@green;
            }    
            .orange-cor{
                color: @red2;
            }    
            .vux-timeline-item-color,.vux-timeline-item-tail{
                color: @gray4;
                background: @gray4;
            }
            .vux-timeline-item-head-first{
                background: @green;
                top:0;

            }
            .vux-timeline-item-content {
                padding: 0 0 @px10 @px25;
            }
            
        }
        footer{
            text-align: right;
            padding: @px10 0;
            a{
                border:1px solid @red2;
                padding: @px3 @px12;
                color: @red2;
                border-radius: @radius5; margin-left: @px15;
                display: inline-block;
                height: 21px;
                img{
                    vertical-align: sub;
                    margin-right: @px3;
                    width: 12px;
                }
                span{
                    vertical-align: middle;
                }
            }
            
        }
    }
}
.screening-msg{
    background:@white !important;
    top:0;
    div.weui-cells {
        margin-top: 0;
    }
    .weui-cells:before{
        border-top: 0;
    }
    .vux-cell-primary{
        overflow: hidden;  
    }
    .vux-label{
        font-size: @title;
        color:@gray5;
        text-overflow: ellipsis; white-space: nowrap;overflow: hidden; 
       
        strong{
            color: @blue;
            font-weight: normal;
        }
    }
    .weui-cell{
        padding:@px8 @px15;
    }
    .weui-cell:before,.weui-cells:after{
        border: 0
    }
    
    .region-box{
        display: flex;
        justify-content:space-between;
        padding-right: @px15;
        height: 20px;
        ul{
            flex:1;
            li{
                width: 50%;
            }
            .weui-loading{
                position: absolute;
                top: 2px;
                left: 14px;
                width: 16px;
                height: 16px;
            }
        }
        div{
            font-size: @fs12;
            color: @gray3;
            margin-top: @px3;           
        }
        img{
            width: 14px;
            vertical-align: sub;
            margin-right: @px2;
        }
    }
    footer{
        .weui-btn_primary{
            &:not(.weui-btn_disabled):active {
                background-color: rgb(78, 130, 170);
            }
        }
    }
    .screening-bd{
        overflow: hidden;
        max-height: 0;
        transition: max-height .5s cubic-bezier(0, 1, 0, 1) -.1s;

    }
    .screening-bd-20{
        max-height: 20px;
    }
    
    .screening-animate {
        max-height: 9999px;
        transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
        transition-delay: 0s;
    }
    .screening-list,.screening-list-ul{
        display: -webkit-flex; /* Safari */
        -webkit-flex-wrap: wrap; /* Safari 6.1+ */
        display: flex;
        flex-wrap: wrap;
        margin-left: -5px; 
        margin-right: -5px;
        overflow: hidden;
        padding: 0 @px15;
        >div,li{
            width:25%;
            margin-bottom: @px5;
            span{
                font-size: @fs12;
                text-align: center;
                margin:0 @px5;
                background: @gray4;
                border-radius: 10em;
                display: block;
                line-height: 20px;
                overflow: hidden; 
                text-overflow: ellipsis; 
                white-space: nowrap;
                padding:0 @px5;
                color:@white;
                position: relative;
            }
            

        }
        .cur span{
            background: @blue;
        }
    }
    
}
